<template>
  <div class="app-container flex column">
    <top-title :updateTime="false" :content="content"></top-title>

    <div class="container f1 flex column">
      <div class="title">
        <div class="icon"></div>
        <div class="context">项目信息</div>
      </div>

      <div class="info-wrap flex">
        <div class="context-wrap f1">
          <div class="label">项目名称:</div>
          <div class="context">{{ list.name || '暂无' }}</div>
        </div>
        <div class="context-wrap f1">
          <div class="label">英文名称:</div>
          <div class="context">{{ list.enName || '暂无' }}</div>
        </div>
        <div class="context-wrap f1">
          <div class="label">项目描述:</div>
          <div class="context">{{ list.projectDescribe || '暂无' }}</div>
        </div>
        <div class="context-wrap f1"></div>
      </div>

      <div class="title" style="margin-top: 58px">
        <div class="icon"></div>
        <div class="context">当前生效版本信息</div>
      </div>

      <div class="info-wrap flex">
        <div class="context-wrap f1">
          <div class="label">版 本 号:</div>
          <div class="context">{{ list.versionCode || '暂无' }}</div>
        </div>
        <div class="context-wrap f1">
          <div class="label">版本名称:</div>
          <div class="context">{{ list.version || '暂无' }}</div>
        </div>
        <div class="context-wrap f1">
          <div class="label">文件名称:</div>
          <div class="context">{{ list.apkName || '暂无' }}</div>
        </div>
        <div class="context-wrap f1"></div>
      </div>

      <div class="title" style="margin-top: 54px">
        <div class="icon"></div>
        <div class="context">历史版本信息</div>
      </div>

      <div class="table-wrap f1">
        <div class="search-group">
          <div class="input-wrap">
            <div class="label">文件名称:</div>
            <div class="input-item">
              <a-input :maxLength="30" clearable v-model="queryParam.apkName" placeholder="请输入单位名称" />
            </div>
          </div>

          <div class="input-wrap">
            <div class="label">项目名称:</div>
            <div class="input-item">
              <a-input :maxLength="30" clearable v-model="queryParam.version" placeholder="请输入责任民警姓名" />
            </div>
          </div>

          <div class="btn-wrap">
            <a-button class="searchBtn" @click="searchQuery()" type="primary"> 搜索 </a-button>
            <a-button class="resetBtn" @click="searchReset()" type="primary"> 重置 </a-button>
          </div>

          <div class="btn-group">
            <a-button class="searchBtn" @click="addEditModal" type="primary"> 新增 </a-button>
          </div>
        </div>

        <a-table
          rowKey="id"
          class="tableList"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          @change="handleTableChange"
        >
          <template v-slot:action="records">
            <span class="operation deatil-color" @click="addEditModal(records)">编辑</span>
            <span class="operation deatil-color" @click="apkHandle(records)">二维码</span>
            <!-- <span class="operation deatil-color" @click="changeVersion(records)">生效版本</span> -->
            <span
              class="operation deatil-color"
              @click="showTakeEffect(records)"
              v-if="records.status === '已生效' ? false : true"
              >生效版本
            </span>
            <span
              class="operation deatil-color"
              @click="showDelete(records)"
              v-if="records.status === '已生效' ? false : true"
              >删除
            </span>
          </template>
        </a-table>
      </div>
    </div>

    <apk-qr-code ref="apkQrCode" :title="titleQr" :urlText="urlTextQr"></apk-qr-code>
    <add-edit-modal ref="addEditModal" @refresh="searchQuery()"></add-edit-modal>
  </div>
</template>

<script>
import { queryById, changeVersion, addVersionDetailDelete } from '@/api/operate'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import topTitle from '@/components/topTitle'
import apkQrCode from '@/components/apkQrCode/apkQrCode'
import addEditModal from './versionDetailModal'
import { comMethods } from '@/mixins/comMethods'
export default {
  name: '',
  components: { topTitle, apkQrCode, addEditModal },
  mixins: [JeecgListMixin, comMethods],
  data() {
    return {
      content: [['版本控制'], ['详情']],
      url: {
        list: `/sys/pProjectVersion/historyList?projectId=${this.$route.query.id}`,
      },
      list: {},
      titleQr: '',
      urlTextQr: '',
      ipagination: {
        current: 1,
        pageSize: 5,
      },
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '文件名',
          align: 'center',
          dataIndex: 'apkName',
        },
        {
          title: '版本号',
          align: 'center',
          dataIndex: 'versionCode',
        },
        {
          title: '版本名称',
          align: 'center',
          dataIndex: 'version',
        },
        {
          title: '版本描述',
          align: 'center',
          dataIndex: 'versionDescribe',
        },
        {
          title: '生效状态',
          align: 'center',
          dataIndex: 'status',
        },
        {
          title: '创建时间',
          align: 'center',
          dataIndex: 'createTime',
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
    }
  },
  mounted() {
    this.gethousePerson()
  },
  methods: {
    addEditModal(records) {
      this.$refs.addEditModal.show(records)
    },
    apkHandle(records) {
      this.titleQr = `扫描下方二维码即可下载${records.version}版本的apk安装包`
      this.urlTextQr = this.imgPrefix + records.url
      this.$refs.apkQrCode.show()
    },
    showTakeEffect(records) {
      changeVersion({ id: records.id }).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message)
          this.searchQuery()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    showDelete(records) {
      addVersionDetailDelete({ id: records.id }).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message)
          this.searchQuery()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    gethousePerson() {
      var data = { id: this.$route.query.id }
      queryById(data).then((res) => {
        this.list = res.result
      })
    },
  },
  destroy() {},
}
</script>

<style scoped lang="less">
.app-container {
  background: var(--theme-content-bg);

  .container {
    background: var(--theme-container-bg);
    padding: 20px;

    .title {
      display: flex;
      align-items: center;
      .icon {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 5px;
        background: #1388ff;
      }
      .context {
        font-size: 16px;
        font-weight: bold;
        color: #1388ff;
        position: relative;

        &::after {
          content: ''; // 必须
          position: absolute;
          left: 0px;
          bottom: 1px;
          right: 0;
          height: 6px;
          background: #1362b3;
          opacity: 0.6;
        }
      }
    }

    .info-wrap {
      padding-bottom: 15px;
      border-bottom: 2px solid #105191;
      .context-wrap {
        font-size: 14px;
        display: flex;
        margin-top: 30px;
        .label {
          font-weight: 500;
          color: #509eee;
        }
        .context {
          font-weight: 500;
          color: #1388ff;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
